<template>
  <div class="background-loading">
    <div class="loading">
      <div class="loading-img">
        <img src="../assets/img/other/login-bg.png" class="loading-img" />
      </div>
      <div class="loading-username">
        <div class="line-one"></div>
          <div class="loading-username-image">
            <img
            src="../assets/img/other/icon-用户-n.png"
            v-show="LoadingState.userfoureboolean === false"
            class="loading-input-uan"
          />
          <img
            src="../assets/img/other/icon-用户-a.png"
            v-show="LoadingState.userfoureboolean"
            class="loading-input-uan"
          />
          </div>
        <el-input  v-model="LoadingState.username"
        :class="LoadingState.seleteindex===1 ? 'SelectClass' : ''"
        @input="GetUserOrPass($event)"
        @focus="UserNameFocus">
        </el-input >
      </div>
       <div class="loading-password">
         <div class="line-two"></div>
         <div class="loading-password-image">
            <img
            src="../assets/img/other/icon-密码-n.png"
            v-show="LoadingState.passwordfoureboolean === false"
            class="loading-input-pan"
          />
          <img
            src="../assets/img/other/icon-密码-a.png"
            v-show="LoadingState.passwordfoureboolean"
            class="loading-input-pan"
          />
         </div>
        <el-input 
        v-model="LoadingState.password" 
        :class="LoadingState.seleteindex===2 ? 'SelectClass' : ''"
        @focus="PassWordFocus"
        show-password
        ></el-input>
      </div>
      <!-- <div class="loading-checkbox-group">
        <el-checkbox-group v-model="checkList" @change="ch">
          <el-checkbox label="自动登陆"></el-checkbox>
          <el-checkbox label="记住密码"></el-checkbox>
        </el-checkbox-group>
      </div> -->
      <div class="loading-logo">
        <img src="../assets/img/other/logo-2.png" class="loading-company-logo-2" />
      </div>
      <div class="loading-schoolname-div">
        <span class="loading-schoolname">虚拟实训中心平台</span>
      </div>
      <div class="Error-div">
        <span>{{ LoadingState.Error }}</span>
      </div>
      <img class="loading-img-name" src="../assets/img/other/logo-1.png" />
      <span class="loading-name">虚拟实训中心平台</span>
      <img
        class="loading-heng"
        @click="Minimized"
        src="../assets/img/other/icon--.png"
      />
      <img
        class="loading-X"
        @click="CloseAll"
        src="../assets/img/other/icon-exit.png"
      />
      <a href="#" class="loading-forgetpassword">忘记密码</a>
      <el-button class="loadint-btn" @click="Loading">登录</el-button>
    </div>
  </div>
</template>

<script>
import router from '../router'
import { defineComponent, reactive,} from "vue";
import { Loadings, } from "../assets/js/pubilcs.js";
export default defineComponent({
  name: "Loading",
  components: {},
  setup() {
    let LoadingState = reactive({
      userfoureboolean:false,
      passwordfoureboolean:false,
      username:'',
      password:'',
      seleteindex:0,
      Error:'',
      loadingboolean:false
      
    });
    //快捷输入
    function GetUserOrPass(event) {
      if (event === "*=") {
        LoadingState.username = "18877778888";
        LoadingState.password = "123456";
      }
      if (event === "*-") {
        LoadingState.username = "19977778888";
        LoadingState.password = "123456";
      }
      if (event === "*0") {
        LoadingState.username = "15121018981";
        LoadingState.password = "123456";
      }
    }
    function UserNameFocus(){
      LoadingState.seleteindex=1
    }
    function PassWordFocus(){
      LoadingState.seleteindex=2
    }
    function Minimized(){
      Application.shutdownAsync();
    }
    function CloseAll(){
      Application.minimized();
    }
    function Loading(){
      Loadings(LoadingState,router)
    }
    return {
      LoadingState,
      UserNameFocus,
      PassWordFocus,
      Minimized,
      CloseAll,
      Loading,
      GetUserOrPass
    };
  },
});
</script>
<style lang="less">
.background-loading {
  position: relative;
  width: 1920px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.background-loading .loading {
  position: absolute;
  width: 480px;
  height: 640px;
}
.background-loading .loading-img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.loading-username,.loading-password{
  position: absolute;
  width: 400px;
  height: 40px;
  top: 290px;
  left: 40px;
  border: 1PX solid #4C4F61;
}
.line-one,.line-two{
  position: absolute;
  width: 2px;
  height: 19px;
  background: rgba(42, 43, 58, 1);
  top: 10px;
  left: 58px;
  z-index: 2;
}
.loading-password{
  top: 360px;
}
.loading-username .el-input__inner,
.loading-password .el-input__inner{
  width: 400px;
  padding-left: 80px;
  background-color: #141521;
  padding-left: 80px;
  font-size: 18px;
  font-family: Arial;
  font-weight: 400;
  color: #6581e0;
  border: none;
}
.loading-username-image,.loading-password-image{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 40px;
  z-index: 3;
}
.loading-username-image img,
.loading-password-image img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.loading .loadint-btn {
  position: absolute;
  width: 400px;
  height: 60px;
  top: 520px;
  left: 40px;
  background: linear-gradient(90deg, #0974d8, #3d8ef1, #7c7ff8);
  border-radius: 10px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
.loading .loadint-btn:hover {
  color: #ffffff;
}
.loading-img-name {
  position: absolute;
  width: 32px;
  height: 32px;
  left: 35px;
  top: 28px;
}
.loading .loading-name {
  position: absolute;
  left: 74px;
  top: 31px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffff;
}
.loading-logo {
  position: absolute;
  top: 100px;
  width: 480px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading .loading-company-logo-2 {
  width: 100px;
  height: 100px;
}
.loading-schoolname-div {
  position: absolute;
  width: 480px;
  height: 20px;
  top: 225px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading .loading-schoolname {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffff;
}
.loading .loading-forgetpassword {
  position: absolute;
  left: 370px;
  top: 445px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #a2a2ff;
  text-decoration: none;
}
.loading .loading-forgetpassword:hover {
  text-decoration: underline;
}
.loading .loading-checkbox-group {
  position: absolute;
  left: 40px;
  top: 451px;
}
.loading .loading-checkbox-group .el-checkbox__label {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
}
.loading .el-button:focus,
.el-button:hover {
  color: #ffffff;
}

.loading-heng {
  position: absolute;
  left: 370px;
  top: 25px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  color: black;
  cursor: pointer;
}
.loading-X {
  position: absolute;
  left: 420px;
  top: 25px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  color: black;
}
.Error-div {
  position: absolute;
  width: 480px;
  height: 40px;
  top: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
  font-size: 18px;
}
.background-loading{
  overflow-x: hidden;
  overflow-y: hidden;
}
.SelectClass{
  border: 1PX solid #3D8EF1;
}

.all-background-loading{
  width: 100%;
  height: 100%;
  background: #6581e0;
}
</style>
